
<template>
  <div class="play1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'play4',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/hohoplay/4/1.png',
          url: 'static/hohoplay/pdf/4/课件 - 下雨报警器.pdf',
          data: [{
            isSelected: 1,
            name: '下雨报警器1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-16/下雨报警器1.mp4'
          }, {
            isSelected: 0,
            name: '下雨报警器2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-16/下雨报警器2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/2.png',
          url: 'static/hohoplay/pdf/4/课件 - 胶囊翻跟斗.pdf',
          data: [{
            isSelected: 1,
            name: '胶囊翻跟斗',
            url: STATICPATH + '/hohoplay/video/4/K-L4-01/胶囊翻跟斗.mp4'
          }, {
            isSelected: 0,
            name: '胶囊翻跟斗2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-01/胶囊翻跟斗2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/3.png',
          url: 'static/hohoplay/pdf/4/课件 - 好玩带传动.pdf',
          data: [{
            isSelected: 1,
            name: '托运的行李为什么要打包片头',
            url: STATICPATH + '/hohoplay/video/4/K-L4-02/托运的行李为什么要打包片头.mp4'
          }, {
            isSelected: 0,
            name: '飞机行李传送带的制作原理',
            url: STATICPATH + '/hohoplay/video/4/K-L4-02/飞机行李传送带的制作原理.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/4.png',
          url: 'static/hohoplay/pdf/4/课件 - 影子舞台.pdf',
          data: [{
            isSelected: 1,
            name: 'ok《影子》加片头',
            url: STATICPATH + '/hohoplay/video/4/K-L4-03/ok《影子》加片头.mp4'
          }, {
            isSelected: 0,
            name: '了解光的传播方式片头2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-03/了解光的传播方式片头2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/5.png',
          url: 'static/hohoplay/pdf/4/课件 - 七彩光纤灯.pdf',
          data: [{
            isSelected: 1,
            name: '七彩光纤灯1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-04/七彩光纤灯1.mp4'
          }, {
            isSelected: 0,
            name: '七彩光纤灯2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-04/七彩光纤灯2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/6.png',
          url: 'static/hohoplay/pdf/4/课件 - 小小降落伞.pdf',
          data: [{
            isSelected: 1,
            name: '小小降落伞1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-05/小小降落伞1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/7.png',
          url: 'static/hohoplay/pdf/4/课件 - 滚动的轮子.pdf',
          data: [{
            isSelected: 1,
            name: '滚动的轮子1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-06/滚动的轮子1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/8.png',
          url: 'static/hohoplay/pdf/4/课件 - 神奇汉诺塔.pdf',
          data: [{
            isSelected: 1,
            name: '神奇的河内塔',
            url: STATICPATH + '/hohoplay/video/4/K-L4-07/神奇的河内塔.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/9.png',
          url: 'static/hohoplay/pdf/4/课件 - 酸碱的变化.pdf',
          data: [{
            isSelected: 1,
            name: '酸碱的变化1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-08/酸碱的变化1.mp4'
          }, {
            isSelected: 0,
            name: '酸碱的变化2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-08/酸碱的变化2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/10.png',
          url: 'static/hohoplay/pdf/4/课件 - 空气动力车.pdf',
          data: [{
            isSelected: 1,
            name: '空气动力车',
            url: STATICPATH + '/hohoplay/video/4/K-L4-09/空气动力车.mp4'
          }, {
            isSelected: 0,
            name: '空气动力车2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-09/空气动力车2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/11.png',
          url: 'static/hohoplay/pdf/4/课件 - 小熊会跳舞.pdf',
          data: [{
            isSelected: 1,
            name: '小熊会跳舞1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-10/小熊会跳舞1.mp4'
          }, {
            isSelected: 0,
            name: '小熊会跳舞2.mp4',
            url: STATICPATH + '/hohoplay/video/4/K-L4-10/小熊会跳舞2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/12.png',
          url: 'static/hohoplay/pdf/4/课件 - 谷物标本.pdf',
          data: [{
            isSelected: 1,
            name: '谷物标本',
            url: STATICPATH + '/hohoplay/video/4/K-L4-11/谷物标本.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/13.png',
          url: 'static/hohoplay/pdf/4/课件 - 3D恐龙.pdf',
          data: [{
            isSelected: 1,
            name: '恐龙灭绝',
            url: STATICPATH + '/hohoplay/video/4/K-L4-12/恐龙灭绝.mp4'
          }, {
            isSelected: 0,
            name: '恐龙生活',
            url: STATICPATH + '/hohoplay/video/4/K-L4-12/恐龙生活.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/14.png',
          url: 'static/hohoplay/pdf/4/课件 - 认识虹吸.pdf',
          data: [{
            isSelected: 1,
            name: '认识虹吸',
            url: STATICPATH + '/hohoplay/video/4/K-L4-13/认识虹吸.mp4'
          }, {
            isSelected: 0,
            name: '认识虹吸2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-13/认识虹吸2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/15.png',
          url: 'static/hohoplay/pdf/4/课件 - 沉与浮的变化.pdf',
          data: [{
            isSelected: 1,
            name: '沉与浮的变化1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-14/沉与浮的变化1.mp4'
          }, {
            isSelected: 0,
            name: '沉与浮的变化2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-14/沉与浮的变化2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/4/16.png',
          url: 'static/hohoplay/pdf/4/课件 - 好玩音乐瓶.pdf',
          data: [{
            isSelected: 1,
            name: '好玩音乐瓶1',
            url: STATICPATH + '/hohoplay/video/4/K-L4-15/好玩音乐瓶1.mp4'
          }, {
            isSelected: 0,
            name: '好玩音乐瓶2',
            url: STATICPATH + '/hohoplay/video/4/K-L4-15/好玩音乐瓶2.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.play1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 35px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
}
</style>
